<template>
  <div
    ref="widget"
    class="RichText"
    :style="[{ ...border }, { backgroundColor: style.backgroundColor }]"
    @mousewheel.stop
  >
    <div class="content" @load.capture="ReLoadImage" v-html="config.content"></div>
  </div>
</template>

<script>
  import { debounce } from 'lodash-es';
  import borderMixin from '@/mixins/borderMixin';
  import widgetResizeMixin from '@/mixins/widgetResizeMixin';

  export default {
    mixins: [widgetResizeMixin, borderMixin],
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      }
    },

    watch: {
      'config.content': 'resize',
      'config.bordered': 'resize',
      'style.borderWidth': 'resize'
    },
    methods: {
      ReLoadImage: debounce(function () {
        // eslint-disable-next-line no-invalid-this
        this.resize();
      }, 500)
    }
  };
</script>

<style lang="scss" scoped>
  .RichText::v-deep {
    font-size: 28px;
    text-align: justify;
    white-space: break-spaces;
    word-break: break-all;

    span[style*='x-small'] {
      font-size: 20px !important;
    }

    span[style*='small'] {
      font-size: 26px !important;
    }

    span[style*='medium'] {
      font-size: 32px !important;
    }

    span[style*='large'] {
      font-size: 36px !important;
    }

    span[style*='x-large'] {
      font-size: 48px !important;
    }

    span[style*='xx-large'] {
      font-size: 64px !important;
    }

    span[style*='xxx-large'] {
      font-size: 96px !important;
    }
  }
</style>
